<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Steper Kuo">
	<title>The Art Of Programing - JS</title>
	
	<!-- Favicons -->
	<link rel="apple-touch-icon" href="./../assets/img/apple-touch-icon.png">
	<link rel="icon" href="./../assets/img/favicon.png">

	<link rel="stylesheet" type="text/css" href="css/index.css">

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>
<body>

<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<!-- Script Fundebug code *** JS -->
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="f3b60739271056d85641a316cd13350f5960922b510427e3ec514bc3f0a74ac5"></script>


<main>
	<section id="demos">
		<div class="row">
			<div class="large-12 columns">
				<h4 id="basic-demos-1.1">1.1 - Left Rotating String</h4>
				<hr>
				<div id="lRStringDemo" class="demo-list">
					<span class="input-wrapper">
						<label for="LRStringSource">Left Rotating String</label>
						<input id="LRStringSource" v-model="sourceValue" placeholder="rotated String">
					</span>
					<span class="input-wrapper">
						<label for="LRStringFrom">From</label>
						<input id="LRStringFrom" v-model.number="fromIndex" type="number" placeholder="from index">
					</span>
					<span class="input-wrapper">
						<label for="LRStringTo">To</label>
						<input id="LRStringTo" v-model.number="toIndex" type="number" placeholder="to index">
					</span>
					<span class="input-wrapper">
						<label for="LRStringTo">Result</label>
						<span id="LRStringValue">{{resultValue}}</span>
					</span>
				</div>
			</div>
			<div class="large-12 columns">
				<h4 id="basic-demos-1.2">1.2 - "A" string contains all chars of "B" string</h4>
				<hr>
				<div id="stringContain" class="demo-list">
					<span class="input-wrapper">
						<label for="longStr">Long String</label>
						<input id="longStr" v-model="longStr" placeholder="Long String">
					</span>
					<span class="input-wrapper">
						<label for="shortStr">Short String</label>
						<input id="shortStr" v-model="shortStr" placeholder="Short String">
					</span>
					<span class="input-wrapper">
						<label for="LRStringTo">Result</label>
						<span id="isContain">{{isContain}}</span>
					</span>
				</div>
			</div>
			<div class="large-12 columns">
				<h4 id="basic-demos-1.3">1.3 - Convert string to integer</h4>
				<hr>
				<div id="convertStringToInteger" class="demo-list">
					<a href="https://github.com/julycoding/The-Art-Of-Programming-By-July/blob/master/ebook/zh/01.03.md"
						 class="demo-block"
						 target="_blank">
						Convert string to integer
					</a>
				</div>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<script src="js/left-rotating-string.js"></script>
<script src="js/string-contain.js"></script>
<script src="js/index.js"></script>

</body>
</html>